<template>
  <div v-if="articleItem" class="article">
    <nav-bar></nav-bar>
    <div class="playvideo">
      <video :src="articleItem.content" controls :poster="articleItem.img" />
      <span class="iconfont icon1 iconbofang-copy"></span>
    </div>
    <div class="btn">
      <button class="editbtn">打开App，流畅又高清</button>
    </div>
    <div class="text">
      <div class="top">
        <span>
          <i class="iconfont icon2 iconhuo"></i>
          <span class=".toptext">{{ articleItem.category.title }}</span>
        </span>
        <h4>{{ articleItem.name }}</h4>
      </div>
      <div class="bottom">
        <span>
          <i class="iconfont iconUPzhu"></i>
          <span class="bottomtext">{{ articleItem.userinfo.name }}</span>
        </span>
        <span class="date">536万观看</span>
        <span class="date">6666弹幕</span>
        <span class="date">{{ articleItem.date }}</span>
      </div>
    </div>
    <div class="good">
      <span :class="[gooditem,{active:isactive}]">
        <i class="iconfont icondianzan"></i>
        <span class="goodtext">点赞</span>
      </span>
      <span @click="collectionArticle" :class="[gooditem,{active:isCollection}]">
        <i class="iconfont iconshoucang"></i>
        <span class="goodtext">收藏</span>
      </span>
      <span @click="guanzhuAuthor" :class="[gooditem,{active:isGuanzhu}]">
        <i v-if="isGuanzhu" class="iconfont iconB"></i>
        <i v-else class="iconfont iconguanzhu"></i>
        <span class="goodtext">关注</span>
      </span>
    </div>
    <div class="tabs">
      <van-tabs v-model="active" color="#fb7299" title-active-color="#fb7299" animated>
        <van-tab title="相关推荐">
          <div class="detail">
            <home-detail
              class="detailItem"
              :key="index"
              v-for="(item, index) in commendList"
              :detailList="item"
            ></home-detail>
          </div>
        </van-tab>
        <van-tab lazy-render="false" title="评论">
          <div class="commend">
            <home-commend @getLength="getlength"></home-commend>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import NavBar from '@/components/common/NavBar'
import HomeDetail from '@/components/home/detail'
import HomeCommend from '@/components/home/commend'

export default {
  data() {
    return {
      articleItem: null,
      active: 0,
      commendList: null,
      num: null,
      isCollection: null,
      gooditem: 'gooditem',
      isactive: null,
      isGuanzhu: null,
    }
  },
  components: {
    NavBar,
    HomeDetail,
    HomeCommend,
  },
  created() {
    this.getArticleItemList()
    this.getCommendList()
    this.getCollectionStatus()
  },
  watch: {
    $route() {
      this.getArticleItemList()
      this.getCommendList()
      this.getCollectionStatus()
    },
  },
  methods: {
    //获取导航的列表信息
    async getArticleItemList() {
      const res = await this.$axios.get('/article/' + this.$route.params.id)
      //   console.log(res)
      this.articleItem = res.data[0]
      if (this.articleItem) {
        this.getGuanzhuStatus()
      }

      //   console.log(this.$route)
    },
    //获取推荐视频
    async getCommendList() {
      const res = await this.$axios.get('/commend')
      //   console.log(res)
      this.commendList = res.data
    },
    getlength(res) {
      this.num = res
    },
    // 点击收藏视频
    async collectionArticle() {
      // console.log('ok')
      if (!sessionStorage.getItem('id') || !sessionStorage.getItem('token')) {
        this.$toast.fail('请先登录')
        return
      }
      const id = window.sessionStorage.getItem('id')
      const res = await this.$axios.post('/collection/' + id, {
        article_id: this.$route.params.id,
      })

      if (res.data.msg == '收藏成功') {
        this.isCollection = true
        this.$toast.success(res.data.msg)
      } else {
        this.isCollection = false
        this.$toast.success(res.data.msg)
      }
      // console.log(res)
    },
    //获取收藏信息
    async getCollectionStatus() {
      if (!sessionStorage.getItem('id') || !sessionStorage.getItem('token')) {
        this.$toast.fail('请先登录')
        return
      }
      const id = window.sessionStorage.getItem('id')
      const res = await this.$axios.get('/collection/' + id, {
        params: {
          article_id: this.$route.params.id,
        },
      })
      // console.log(res)
      this.isCollection = res.data.success
    },
    // 点击关注作者
    async guanzhuAuthor() {
      // console.log('ok')
      console.log(this.articleItem)
      if (!sessionStorage.getItem('id') || !sessionStorage.getItem('token')) {
        this.$toast.fail('请先登录')
        return
      }
      const id = window.sessionStorage.getItem('id')
      const res = await this.$axios.post('/sub_scription/' + id, {
        sub_id: this.articleItem.userid,
      })
      // console.log(res)
      if (res.data.msg == '关注成功') {
        this.isGuanzhu = true
        this.$toast.success(res.data.msg)
      } else {
        this.isGuanzhu = false
        this.$toast.success(res.data.msg)
      }
    },
    //获取关注信息
    async getGuanzhuStatus() {
      if (!sessionStorage.getItem('id') || !sessionStorage.getItem('token')) {
        this.$toast.fail('请先登录')
        return
      }
      const id = window.sessionStorage.getItem('id')
      const res = await this.$axios.get('/sub_scription/' + id, {
        params: {
          sub_id: this.articleItem.userid,
        },
      })
      console.log(res)
      this.isGuanzhu = res.data.success
    },
  },
}
</script>

<style lang="stylus" scoped>
.article {
  background-color: #fff;
}

.playvideo {
  position: relative;
  height: 100%;
  width: 100%;

  video {
    width: 100%;
  }
}

.icon1 {
  color: #d1dde2;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 9.722vw;
}

.btn {
  display: flex;
  padding: 0 3.333vw;
  justify-content: center;
}

.editbtn {
  background: #fb7299;
  border-radius: 4.8vw;
  color: #fff;
  font-size: 3.73333vw;
  text-align: center;
  width: 100%;
  height: 9.6vw;
  line-height: 9.6vw;
  margin: 3.2vw 0;
}

.text {
  padding: 0 3.333vw;
}

.top {
  display: flex;
  height: 6.944vw;
}

.top>span {
  color: #fb7299;
  width: 13.889vw;
  padding: 0 1.389vw 0 0;
  height: 5.556vw;
  line-height: 5.556vw;
  background-color: #f4f4f4;
  border-radius: 2.778vw;
  display: flex;
  justify-content: center;
  font-size: 3.333vw;
}

.toptext {
  vertical-align: bottom;
  padding-top: 1.111vw;
}

.top h4 {
  font-size: 4.444vw;
  margin-left: 2.778vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bottom {
  margin: 1.389vw 0;
}

.bottomtext {
  font-size: 3.333vw;
  margin-left: 0.556vw;
  margin-right: 2.778vw;
}

.date {
  color: #999999;
  font-size: 3.333vw;
  margin: 0 2.778vw;
}

.good {
  padding: 2.222vw 3.333vw;
  color: #999;
}

.good i {
  font-size: 5vw;
}

.gooditem {
  margin-right: 5vw;
}

.goodtext {
  font-size: 3.333vw;
  margin-left: 1.111vw;
}

.tabs {
  border-top: 0.278vw solid #f8f8f8;
}

.tabstitle {
  padding: 0 4.444vw;
}

.detail {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 0 1.111vw;
}

.detailItem {
  width: 50%;
}

.active {
  color: #fb7299 !important;
}
</style>
